<template>
	<view>

		<u-popup zIndex="100" :mask-custom-style="maskStyle" v-model="show" mode="bottom" @close="closeFun">
			<view class="Model">
				<view class="u-flex  u-row u-row-center" style="flex-direction: column;">
					<u-button @click="clicks" :custom-style="customStyBtn" v-show="type!=3"
						:type="type==0?'warning':type==1?'success':type==2?'success':''" @touchstart="operateEvent"
						@touchend="operateEnd" @touchmove="operateClear">
						<block v-if="type==0">
							<u-icon name="mic"></u-icon><text class="u-font-xs">长按开始录音</text>
						</block>
						<block v-else-if="type==1">
							<text class="u-font-xs">语音录制中...</text>
						</block>
						<block v-else-if="type==2">
							<u-icon name="play-right-fill"></u-icon>
							<text class="u-font-xs">点击播放录音</text>
						</block>
					</u-button>
					<block v-if="type==2">
						<u-button @click="upManger" :custom-style="customStyBtn" type="warning" class="u-m-t-22"><text
								class="u-font-xs">上传录音</text></u-button>
						<u-button :custom-style="customStyBtn" @click="show=false" type="error" class="u-m-t-22"><text
								class="u-font-xs">关闭</text></u-button>

					</block>
				</view>
			</view>
		</u-popup>

		<view class="ModelTips" v-if="tipsShow">
			<view class="title">正在录制音频</view>
			<view class="center">
				<block v-if="type==3">
					<u-icon name="close-circle-fill" color="#fbbeca" size="80"></u-icon>
				</block>
				<block v-else>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
				</block>

			</view>
			<view class="tips" v-if="type==3">松手取消录制</view>
			<view class="tips" v-else>松手完成录音</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'

	import { onLoad } from '@dcloudio/uni-app'
	import orderApi from '@/api/order'
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext();
    let emit = defineEmits(['updates'])
	innerAudioContext.autoplay = true;
	const tempFilePath = ref('')

    const orderid = ref('')
	onLoad(() => {
		recorderManager.onStop((res) => {
			console.log("监听结束录音")
			tempFilePath.value = res.tempFilePath
		 //    let str =  uni.getFileSystemManager().readFileSync(tempFilePath.value, 'base64')
			// console.log("音频",str);
		})
		recorderManager.onStart(()=>{
			console.log("监听开始录音")
		})
	})

	const show = ref(false)

	const type = ref(0);

	const tipsShow = ref(false)

	function Open(id) {
		orderid.value = id
		Clear()
		show.value = true
	}

	function clicks(){
		if(type.value ==2){
			innerAudioContext.src = tempFilePath.value
			innerAudioContext.play()
		}
	}

	function upManger(){

		orderApi.orderOperate({
			id: orderid.value,
			state: 0,
			audio:uni.getFileSystemManager().readFileSync(tempFilePath.value, 'base64')
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			emit('updates',true)

		})
	}

	function Clear() {
		recorderManager.stop()
	}

	function operateEvent() {//录制开始
		const nowTime = new Date().getTime()
		let targetTime = new Date().getTime()
		do{
			targetTime = new Date().getTime()
		}while(targetTime-nowTime<3000)
		console.log("三秒后执行")

		recorderManager.start({})
		console.log("执行录音")
		type.value = 1
		tipsShow.value = true

	}

	function operateEnd() {//录制结束

		if (type.value == 0) {
			return uni.showToast({
				title: '录制时间过短',
				icon: 'none'
			})
		}
		if (type.value != 3) {
			type.value = 2
			tipsShow.value = false
			// Clear()
		}
		else {
			show.value = false
		}
		console.log("结束录音")
	}

	function operateClear() {//取消录制
		type.value = 3
	}

	function closeFun() {
		type.value = 0
		tipsShow.value = false
		Clear()
	}


	const maskStyle = reactive({
		zIndex: 90
	})
	const customStyBtn = reactive({
		width: '300rpx'
	})
	defineExpose({
		Open,
		Clear
	})
</script>

<style lang="scss" scoped>
	.Model {
		padding: 52upx 0;
	}

	.ModelTips {
		z-index: 500;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%);
		width: 50vw;
		// min-height: 25vh;
		background-color: #f3f3f3;
		border-radius: 28upx;
		overflow: hidden;

		.title {

			font-weight: 800;
			text-align: center;
			padding: 28upx;

		}

		.center {
			height: 120upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.item {
				height: 90upx;
				width: 10upx;
				background: white;
				/* 加margin，使竖条之间有空隙 */
				margin: 0upx 6upx;
				/* 圆角 */
				border-radius: 10upx;
				/* 动画：名称、时间、循环 */
				animation: loading 1s infinite;

			}

			/* 为每一个竖条设置延时 */
			.item:nth-child(2) {
				animation-delay: 0.1s;
			}

			.item:nth-child(3) {
				animation-delay: 0.2s;
			}

			.item:nth-child(4) {
				animation-delay: 0.3s;
			}

			.item:nth-child(5) {
				animation-delay: 0.4s;
			}

			.item:nth-child(6) {
				animation-delay: 0.5s;
			}

			.item:nth-child(7) {
				animation-delay: 0.6s;
			}

			.item:nth-child(8) {
				animation-delay: 0.7s;
			}
		}

		.tips {
			font-size: 24upx;
			text-align: center;
			color: #a8a8a8;
			padding-bottom: 22upx;
		}
	}

	/* 设置动画 */
	@keyframes loading {
		0% {
			height: 0upx;
		}

		50% {
			height: 50upx;
		}

		100% {
			height: 0upx;
		}
	}
</style>
